<template>
  <div style="width: 500px">
    <el-form size="small" label-width="110px">
      <el-row>
        <el-col style="width: 400px">
          <el-form-item label="过滤关键字：">
            <el-input placeholder="请输入" clearable v-model="filterText" />
          </el-form-item>
        </el-col>
        <el-col style="width: 100px">
          <el-button
            type="primary"
            size="mini"
            @click="add"
            style="margin-left: 15px"
            >添加
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row style="margin-top: 15px">
      <el-col style="width: 500px">
        <el-tree
          ref="tree"
          :data="districtTree"
          :props="districtListProps"
          node-key="id"
          default-expand-all
          :filter-node-method="filterNode"
          :expand-on-click-node="false"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="text" size="mini" @click="update(data)">
                编辑
              </el-button>
              <el-button
                v-if="data.state === 2"
                type="text"
                size="mini"
                @click="enable(data)"
              >
                启用
              </el-button>
              <el-button
                v-else-if="data.state === 1"
                type="text"
                class="red"
                size="mini"
                @click="disable(data)"
              >
                禁用
              </el-button>
              <el-button
                type="text"
                class="red"
                size="mini"
                @click="remove(data)"
              >
                删除
              </el-button>
            </span>
          </span>
        </el-tree>
      </el-col>
    </el-row>
    <el-dialog
      :title="detailDialogTitle"
      :visible.sync="detailDialogFormVisible"
      custom-class="dialog"
      :before-close="beforeHiddenDetailDialogFunc"
      center
      width="600px"
    >
      <detail
        ref="detailDialog"
        :form-data="districtData"
        :operate="operate"
        :provinceAndCityTree="provinceAndCityTree"
        :districtArray="districtArray"
        :stateArray="stateArray"
        @hiddenDetailDialog="hiddenDetailDialogFunc"
      />
    </el-dialog>
  </div>
</template>

<script>
import Detail from "./Detail";
import {
  getDistrictTreeByCondition,
  getDistrictListByCondition,
  getProvinceAndCityTree,
  enableDistrict,
  disableDistrict,
  deleteDistrict
} from "../../axios/api";
import { Message } from "element-ui";

export default {
  data() {
    return {
      districtTree: [],
      filterText: "",
      districtListProps: {
        label: "name"
      },
      districtArray: [],
      stateArray: [
        { label: "启用", value: 1 },
        { label: "禁用", value: 2 }
      ],
      detailDialogTitle: "",
      detailDialogFormVisible: false,
      districtData: {},
      operate: 0,
      provinceAndCityTree: []
    };
  },
  methods: {
    getData() {
      getDistrictTreeByCondition(
        {},
        data => {
          this.districtTree = data;
        },
        () => {
          this.districtTree = [];
        }
      );
      getDistrictListByCondition(
        {},
        data => {
          this.districtArray = data;
        },
        () => {
          this.districtArray = [];
        }
      );
      getProvinceAndCityTree(
        {},
        data => {
          this.provinceAndCityTree = data;
        },
        () => {
          this.provinceAndCityTree = [];
        }
      );
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    add() {
      this.detailDialogTitle = "添行政区域";
      this.detailDialogFormVisible = true;
      this.districtData = {
        state: 1
      };
      this.operate = 0;
    },
    update(row) {
      this.detailDialogTitle = "编辑地图数据";
      this.detailDialogFormVisible = true;
      this.districtData = JSON.parse(JSON.stringify(row));
      this.operate = 1;
    },
    enable(row) {
      enableDistrict(
        row,
        () => {
          Message({
            showClose: true,
            message: "启用成功！",
            type: "success"
          });
          this.getData();
        },
        res => {
          Message({
            showClose: true,
            message: res.msg,
            type: "error"
          });
        }
      );
    },
    disable(row) {
      disableDistrict(
        row,
        () => {
          Message({
            showClose: true,
            message: "禁用成功！",
            type: "success"
          });
          this.getData();
        },
        res => {
          Message({
            showClose: true,
            message: res.msg,
            type: "error"
          });
        }
      );
    },
    // 操作 - 删除
    remove(row) {
      let __this = this;
      this.$confirm("数据删除后将无法恢复，是否确认删除？", "提示", {}).then(
        () => {
          deleteDistrict(
            row,
            () => {
              Message({
                showClose: true,
                message: "删除成功！",
                type: "success"
              });
              __this.getData();
            },
            res => {
              Message({
                showClose: true,
                message: res.msg,
                type: "error"
              });
            }
          );
        },
        () => {}
      );
    },
    beforeHiddenDetailDialogFunc(done) {
      this.$refs["detailDialog"].clearValidate();
      done();
    },
    hiddenDetailDialogFunc() {
      this.$refs["detailDialog"].clearValidate();
      this.detailDialogFormVisible = false;
      this.getData();
    }
  },
  mounted() {
    this.getData();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  components: {
    Detail
  }
};
</script>

<style lang="stylus" scoped>
.custom-tree-node
  flex 1
  display flex
  align-items center
  justify-content space-between
  font-size 14px
  padding-right 8px

.red
  color #f00
</style>
